<template>
    <!-- 侧边菜单+标题信息 -->
    <el-aside
      :width="baseStore.asideWidth + 'px'"
      class="aside"
      :style="props.asideStyle"
    >
  <slot></slot>
  <!-- 菜单部分 -->
  <el-menu
    class="el-menu-vertical-demo"
    :active-text-color="props['activeTextColor']"
    :background-color="props['backgroundColor']"
    :default-active="props['defaultActive']"
    :text-color="props['textColor']"
    :style="{height: `calc(100% - ${titleHeight}px)`}"
    @select="select"
    :collapse="baseStore.isCollapse"
    router
  >
    <template v-for="menu in props.menuInfo" :key="menu.index">
      <el-menu-item v-if="menu.childrens === undefined" :index="menu.index" >
        <el-icon v-if="menu.icon!=undefined"><component :is="menu.icon"/></el-icon>
        <span>{{menu.title}}</span>
      </el-menu-item>
      <el-sub-menu v-else index>
        <template #title>
          <el-icon v-if="menu.icon!=undefined"><component :is="menu.icon"/></el-icon>
          <span>{{menu.title}}</span>
        </template>
        <el-menu-item v-for="children in menu.childrens" :key="children.index" :index="children.index">
          <el-icon v-if="children.icon!=undefined"><component :is="children.icon"/></el-icon>
          <span>{{children.title}}</span>
          </el-menu-item>
      </el-sub-menu>
    </template>
  </el-menu>
    </el-aside>
</template>

<script setup>
import { onMounted, ref, useSlots } from "vue";
import { BaseStore } from "../stores/base_store";
// 从pinia中获取 是否折叠的状态
const baseStore=BaseStore()
// props    
const props = defineProps({
  'asideStyle':{},
  'asideWidth':{default:200},
  'menuInfo': {type:Array},
  "activeTextColor": { default: "#ffd04b" },
  "backgroundColor": { default: '#00284d' },
  "defaultActive": { default: "" },
  "textColor": { default: "#fff" },
});
baseStore.setAsideWidth(props.asideWidth)
// 点击菜单产生回调
const emit=defineEmits(['select'])
const select=(path)=>{
  function getInfo(path){
    for(let i=0;i<props.menuInfo.length;i++){
      const menu=props.menuInfo[i]
      if(menu.index==path){
        return menu
      }
      if(menu.childrens){
        for(let j=0;j<menu.childrens.length;j++){
          const children=menu.childrens[j]
          if(children.index==path){
            return children
          }
        }
      }
    }
  }
  const info=getInfo(path)
  emit('select',info)
}


// 获取插槽
const slots=useSlots()
// 当前插槽值为0
const titleHeight=ref(0)
// 判断当前插槽是否被使用
if(Object.keys(slots).length!=0){
  // 获取插槽实例
  const systemTitle=slots.default()[0]
  if(systemTitle.props!=null){
     // 获取插槽高度
    titleHeight.value=systemTitle.props.titleHeight
  }
}

</script>

<style lang="scss" scoped>
#app .el-menu {
  // 去除多出1px边框问题
  border-right-width: 0;
  overflow: auto;
  // 隐藏滚动条
  &::-webkit-scrollbar {
    display: none;
  }
}
</style>